<html>
    <head>
        <meta charset="utf-8">
        <title>3D书页</title>
        <style>
            body
            {
                background-color: black;
                overflow: hidden;
                color: white;
                -moz-user-select: none;
            }
            main
            {
                margin: 100px auto 0 auto;
                width: 300px;
                height: 400px;
                position: relative;
                perspective: 900px;
                perspective-origin: 30% 80%;
            }
            section
            {
                width: 100%;
                height: 100%;
                position: absolute;
               top: 0px;
               left: 0px;
              
               transform-origin: left 0 0; 
               opacity: 0.8;
               transition: transform 2s;
            }
            section:nth-child(1){
                background-color: yellow;
                transform: rotateY(-2deg);
                
            }
            section:nth-child(2)
            {
                 background-color: red;
                 transform: rotateY(-17deg);
            }
             section:nth-child(3)
            {
                 background-color: blue;
                 transform: rotateY(-32deg);
            }
             section:nth-child(4)
            {
                 background-color: green;
                 transform: rotateY(-42deg);
                 color: white;
            }
             section:nth-child(4) h2
             {
                 text-align: center;
                 margin-top: 30px;
                 
                 font-weight: normal;
             }
             section:nth-child(4) p
             {
                 
                 text-indent: 2em;

                 margin: 10px 30px;

                 font-size: 13px;
             }
             section:nth-child(4) span
             {
                position: absolute;
                right: 30px;
                bottom: 40px;
                font-size: 13px;
             }
             section i{
                 position: absolute;
                 right: 13px;
                 bottom: 10px;
                 font-size: 11px;
                 color: #ccc;
             }
             section:nth-child(5)
             {
                 background-color: purple;
                 transform: rotateY(-57deg);
                 color: white;
                 opacity: 0.95;
             }
             section:nth-child(5) h1{
                 position: absolute;
                 top: 30px;
                 left: 25px;
                 font-size: 32px;
                 font-weight: normal;
             }
              section:nth-child(5) span{
                  position: absolute;
                  bottom: 80px;
                  left: 125px;
                  font-size: 18px;
              }
              
              section:nth-child(5):active
              {
                   transform: rotateY(-120deg);
                  
              }
               
        </style>
        <!--rect[矩形]:size[width height] origin[x,y]-->
        <!-- perspective-origin 定义3D效果中 元素基于X轴 Y轴 的元素位置,用户可以改变元素底部
        位置-->
        <!--当使用到perspective-origin 属性时 子元素同样可以使用该特性-->
        <!--perspective-origin 定义镜头在平面中的位置 默认是放在元素中心
        50% 50%-->
    </head>
    <body>
        <main>
            <!--区-->
            <!--代码从上往下顺序执行-->
            <section>
                <!--每个区的标号-->
                <i>4</i>
            </section>
            <section>
                <i>3</i>
            </section>
            <section>
                <i>2</i>
            </section>
            <!--有内容的区域-->
            <section>
              <h2>引言</h2>
              <p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容：[1]  ）</p>
              <p>CSS目前最新版本为CSS5，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式。</p>
              <span>
                  智游H5教研组 编著
              </span>
              <i>1</i>
            </section> 
            <!--封皮-->
            <section>
                <h1>CSS图形变换入门</h1>
                <span>智游教育</span>
                </section>     
        </main>
    </body>
</html>